<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查新报告编辑器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm border-b fixed top-0 left-0 right-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <i class="ri-file-search-line text-2xl text-blue-600 mr-3"></i>
                    <h1 class="text-xl font-semibold text-gray-900">查新报告</h1>
                </div>
                <div class="flex items-center space-x-4">
                    <button onclick="saveReport()" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        <i class="ri-save-line mr-2"></i>
                        保存
                    </button>
                    <!-- <button onclick="sendNotification()" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                        <i class="ri-mail-send-line mr-2"></i>
                        发送通知
                    </button> -->
                    <button onclick="exportPDF()" class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
                        <i class="ri-file-pdf-line mr-2"></i>
                        导出
                    </button>
                </div>
            </div>
        </div>
    </header>

    <main class="max-w-5xl mx-auto py-8 px-4 sm:px-6 lg:px-8 mt-16">
        <!-- 基础信息 -->
        <div class="bg-white rounded-lg shadow-sm border mb-8">
            <div class="px-6 py-4 border-b">
                <h2 class="text-lg font-semibold text-gray-900">基础信息</h2>
            </div>
            <div class="px-6 mb-4">
                <div class="py-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">发明名称</label>
                    <input type="text" id="inventionName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入发明名称">
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">文件编号</label>
                        <input type="text" id="fileNumber" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入文件编号">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">委托人</label>
                        <input type="text" id="client" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入委托人">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">检索日</label>
                        <input type="date" id="searchDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">评估报告总计页数</label>
                        <input type="number" id="totalPages" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="页数">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">附报告中引用的各相关文件副本</label>
                        <input type="text" id="attachments" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" value="1份" readonly>
                    </div>
                    
                </div>
            </div>
        </div>

        <!-- 评估结论 -->
        <div class="bg-white rounded-lg shadow-sm border mb-8">
            <div class="px-6 py-4 border-b">
                <h2 class="text-lg font-semibold text-gray-900">评估结论</h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-3">非正常申请评断结论</label>
                        <div class="flex space-x-4">
                            <label class="flex items-center">
                                <input type="radio" name="abnormalApplication" value="yes" class="mr-2">
                                <span>是</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="abnormalApplication" value="no" class="mr-2">
                                <span>否</span>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-3">是否具备实用性</label>
                        <div class="flex space-x-4">
                            <label class="flex items-center">
                                <input type="radio" name="practicality" value="yes" class="mr-2">
                                <span>是</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="practicality" value="no" class="mr-2">
                                <span>否</span>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-3">是否申请</label>
                        <div class="flex flex-col space-y-2">
                            <label class="flex items-center">
                                <input type="radio" name="shouldApply" value="modify" class="mr-2">
                                <span>修改后申请</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="shouldApply" value="no" class="mr-2">
                                <span>不申请</span>
                            </label>
                            <div class="ml-6 mt-2">
                                <label class="block text-sm text-gray-600 mb-1">理由：</label>
                                <input type="text" id="noApplyReason" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入不申请的理由">
                            </div>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-3">建议申请类型</label>
                        <div class="flex flex-col space-y-2">
                            <label class="flex items-center">
                                <input type="radio" name="applicationType" value="utility" class="mr-2">
                                <span>实用新型</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="applicationType" value="invention" class="mr-2">
                                <span>发明</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="applicationType" value="other" class="mr-2">
                                <span>其他</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- A. 检索工具 -->
        <div class="bg-white rounded-lg shadow-sm border mb-8">
            <div class="px-6 py-4 border-b">
                <h2 class="text-lg font-semibold text-gray-900">A. 检索工具</h2>
            </div>
            <div class="p-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">检索用数据库</label>
                    <input type="text" id="searchDatabase" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" value="壹专利" placeholder="请输入检索数据库">
                </div>
            </div>
        </div>

        <!-- B. 相关文献 -->
        <div class="bg-white rounded-lg shadow-sm border mb-8">
            <div class="px-6 py-4 border-b">
                <h2 class="text-lg font-semibold text-gray-900">B. 相关文献</h2>
            </div>
            <div class="p-6">
                <div class="overflow-x-auto">
                    <table class="min-w-full border border-gray-300">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-2 py-2 border border-gray-300 text-left text-sm font-medium text-gray-700">序号</th>
                                <th class="px-2 py-2 border border-gray-300 text-left text-sm font-medium text-gray-700">文献类型</th>
                                <th class="px-4 py-2 border border-gray-300 text-left text-sm font-medium text-gray-700">文献名称</th>
                                <th class="px-2 py-2 border border-gray-300 text-left text-sm font-medium text-gray-700">公开/公告日期</th>
                                <th class="px-4 py-2 border border-gray-300 text-left text-sm font-medium text-gray-700">相关部分</th>
                            </tr>
                        </thead>
                        <tbody id="literatureTable">
                            <tr>
                                <td class="px-2 py-2 border border-gray-300">
                                    <input type="text" class="w-full px-2 py-1 border-0 focus:outline-none" placeholder="1">
                                </td>
                                <td class="px-2 py-2 border border-gray-300">
                                    <select class="w-full px-2 py-1 border-0 focus:outline-none">
                                        <option value="">选择类型</option>
                                        <option value="X">X</option>
                                        <option value="Y">Y</option>
                                        <option value="A">A</option>
                                    </select>
                                </td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <input type="text" class="w-full px-2 py-1 border-0 focus:outline-none" placeholder="请输入相关文献">
                                </td>
                                <td class="px-2 py-2 border border-gray-300">
                                    <input type="date" class="w-full px-2 py-1 border-0 focus:outline-none">
                                </td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <input type="text" class="w-full px-2 py-1 border-0 focus:outline-none" placeholder="相关部分">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        <i class="ri-add-line mr-2"></i>添加文献
                    </button>
                </div>
                <div class="mt-4 p-4 bg-gray-50 rounded-lg">
                    <p class="text-sm text-gray-600"><strong>注：文献类型分类：</strong></p>
                    <p class="text-sm text-gray-600">X：单独影响新颖性或创造性的文件</p>
                    <p class="text-sm text-gray-600">Y：与其他Y类文件组合后影响创造性的文件</p>
                    <p class="text-sm text-gray-600">A：背景技术文件</p>
                </div>
            </div>
        </div>

        <!-- C. 检索说明 -->
        <div class="bg-white rounded-lg shadow-sm border mb-8">
            <div class="px-6 py-4 border-b">
                <h2 class="text-lg font-semibold text-gray-900">C. 检索说明</h2>
            </div>
            <div class="p-6">
                <textarea id="keywords" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入检索说明"></textarea>
            </div>
        </div>

        <!-- D. 审核结果简述 -->
        <div class="bg-white rounded-lg shadow-sm border mb-8">
            <div class="px-6 py-4 border-b">
                <h2 class="text-lg font-semibold text-gray-900">D. 审核结果简述</h2>
            </div>
            <div class="p-6">
                <textarea id="auditSummary" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入查新结论..."></textarea>
                <p class="text-sm text-gray-500 mt-2">示例：本方案相对于对比文件1具备区别技术特征，具备新颖性；但对比文件1、对比文件2及常规技术手段的结合存在技术启示，本方案不具备创造性。</p>
            </div>
        </div>

        <!-- E. 具体问题及修改建议 -->
        <div class="bg-white rounded-lg shadow-sm border mb-8">
            <div class="px-6 py-4 border-b">
                <h2 class="text-lg font-semibold text-gray-900">E. 具体问题及修改建议</h2>
            </div>
            <div class="p-6">
                <!-- 技术特征 -->
                <div class="mb-6">
                    <h3 class="text-md font-semibold text-gray-800 mb-3">本方案公开的技术特征</h3>
                    <div class="mb-4">
                        <textarea id="distinctiveFeatures" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="本方案公开的技术特征包含：1、XXX；2、XXX"></textarea>
                    </div>
                </div>

                <!-- 新颖性 -->
                <div class="mb-6">
                    <h3 class="text-md font-semibold text-gray-800 mb-3">新颖性</h3>
                    <div class="mb-4">
                        <div class="flex space-x-4 mb-3">
                            <label class="flex items-center">
                                <input type="radio" name="novelty" value="yes" class="mr-2">
                                <span>本方案具备新颖性</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="novelty" value="no" class="mr-2">
                                <span>本方案不具备新颖性</span>
                            </label>
                        </div>
                        <textarea id="distinctiveFeatures" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入具体比对描述..."></textarea>
                    </div>
                </div>

                <!-- 创造性 -->
                <div class="mb-6">
                    <h3 class="text-md font-semibold text-gray-800 mb-3">创造性</h3>
                    <div>
                        <div class="flex space-x-4 mb-3">
                            <label class="flex items-center">
                                <input type="radio" name="creativity" value="yes" class="mr-2">
                                <span>本方案具备创造性</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="creativity" value="no" class="mr-2">
                                <span>本方案不具备创造性</span>
                            </label>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 gap-4 mb-4">
                        <div>
                            <textarea id="technicalProblem" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入具体比对描述..."></textarea>
                        </div>
                    </div>
                </div>

                <!-- 发明完成度 -->
                <div class="mb-6">
                    <h3 class="text-md font-semibold text-gray-800 mb-3">发明完成度</h3>
                    <textarea id="inventionCompleteness" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入完成度描述..."></textarea>
                    <p class="text-sm text-gray-500 mt-2">示例：逻辑主线完整，发明完成度完整。</p>
                </div>

                <!-- 其他 -->
                <div>
                    <h3 class="text-md font-semibold text-gray-800 mb-3">其他</h3>
                    <textarea id="otherIssues" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入其他问题描述..."></textarea>
                </div>
            </div>
        </div>

        <!-- 签章信息 -->
        <div class="bg-white rounded-lg shadow-sm border mb-8">
            <div class="px-6 py-4 border-b">
                <h2 class="text-lg font-semibold text-gray-900">签章信息</h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">检索员</label>
                        <input type="text" id="searcher" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入检索员姓名">
                    </div>
                    <!-- <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">审核员</label>
                        <input type="text" id="reviewer" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入审核员姓名">
                    </div> -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">完成日期</label>
                        <input type="date" id="completionDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
            </div>
        </div>

        <!-- 注释 -->
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <p class="text-sm text-yellow-800"><strong>注：</strong>本报告结果仅供参考，不作为法律依据。</p>
        </div>
    </main>

    <!-- 通知发送模态框 -->
    <div id="notificationModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
                <div class="px-6 py-4 border-b">
                    <h3 class="text-lg font-semibold text-gray-900">发送通知</h3>
                </div>
                <div class="p-6">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">发明人邮箱</label>
                        <input type="email" id="inventorEmail" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入发明人邮箱">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">通知内容</label>
                        <textarea id="notificationContent" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入通知内容">您好，您委托的查新报告已完成，请查收。</textarea>
                    </div>
                </div>
                <div class="px-6 py-4 border-t flex justify-end space-x-3">
                    <button onclick="closeNotificationModal()" class="px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors">
                        取消
                    </button>
                    <button onclick="confirmSendNotification()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                        发送
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化富文本编辑器
        
        document.addEventListener('DOMContentLoaded', function() {

            // 生成报告编号
            generateReportNumber();
            
            // 设置默认日期
            document.getElementById('searchDate').value = new Date().toISOString().split('T')[0];
        });

        // 生成报告编号
        function generateReportNumber() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const random = Math.floor(Math.random() * 1000).toString().padStart(5, '0');
            const reportNumber = `CX${year}${month}${day}${random}`;
            document.getElementById('fileNumber').value = reportNumber;
        }

        // 保存报告
        function saveReport() {
            
            // 显示成功消息
            showMessage('报告保存成功！', 'success');
        }

        // 发送通知
        function sendNotification() {
            document.getElementById('notificationModal').classList.remove('hidden');
        }

        // 关闭通知模态框
        function closeNotificationModal() {
            document.getElementById('notificationModal').classList.add('hidden');
        }

        // 确认发送通知
        function confirmSendNotification() {
            const email = document.getElementById('inventorEmail').value;
            const content = document.getElementById('notificationContent').value;
            
            if (!email) {
                showMessage('请输入发明人邮箱', 'error');
                return;
            }

            // 这里可以调用实际的邮件发送API
            console.log('发送通知到:', email);
            console.log('通知内容:', content);
            
            closeNotificationModal();
            showMessage('通知发送成功！', 'success');
        }

        // 导出PDF
        function exportPDF() {
            // 这里可以集成PDF生成库
            showMessage('PDF导出功能开发中...', 'info');
        }

        // 显示消息
        function showMessage(message, type) {
            const colors = {
                success: 'bg-green-500',
                error: 'bg-red-500',
                info: 'bg-blue-500'
            };
            
            const messageDiv = document.createElement('div');
            messageDiv.className = `fixed top-4 right-4 ${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg z-50`;
            messageDiv.textContent = message;
            
            document.body.appendChild(messageDiv);
            
            setTimeout(() => {
                messageDiv.remove();
            }, 3000);
        }

        // 更新统计数据
        function updateStats(total, relevant, key) {
            document.getElementById('totalResults').textContent = total;
            document.getElementById('relevantResults').textContent = relevant;
            document.getElementById('keyResults').textContent = key;
        }

        // 加载已保存的报告
        function loadReport(reportNumber) {
            
        }
    </script>
</body>
</html>